<template>
  <!--视频预览-->
  <transition name="scale" appear>
    <el-dialog
      v-if="videoPreview.visible"
      title="视频预览"
      :visible.sync="videoPreview.visible"
      append-to-body
      show-close
      custom-class="tinymce"
      :before-close="resetVideoPreview"
      width="75%"
    >
      <g-spin :loading="!videoPreview.initial" style="min-height: 550px">
        <div id="aliplay-video" style="width: 100%"></div>
      </g-spin>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      videoPreview: {
        visible: false,
        initial: false,
        player: null,
        url: ''
      }
    }
  },

  methods: {
    show() {
      this.videoPreview.initial = false
      this.videoPreview.visible = true
    },

    setInitial(initial = false) {
      this.videoPreview.initial = initial
    },

    hide() {
      this.resetVideoPreview()
    },

    resetVideoPreview() {
      this.videoPreview = {
        ...this.videoPreview,
        visible: false,
        initial: false,
        player: null,
        url: ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
$button-primary-color: $--color-primary;
.aliplay-video__wrapper {
  width: 100%;
  height: 550px;
  position: relative;
}
</style>
